<template>
  <view class="brand">
    <image class="bannerImg" :src="$store.state.imgBaseUrl + '/brand_top.png'"></image>
    <scroll-view scroll-y="true" class="brand-wraper" @scrolltolower="lower" v-if="brandList && brandList.length > 0">
      <view class="brandList" v-for="(item, index) in brandList" :key="index" v-if="item.listProduct && item.listProduct.length > 0">
        <view class="brandTitle">
          <view style="display: flex;align-items: center;">
            <image :src="item.imageUrl" class="brandImg"></image>
            <text class="brand-name">{{item.name}}</text>
          </view>
          <view style="margin-left: auto;display: flex;align-items: center;">
            <text @click="gobrandList(item)" class="brand-all">全部</text>
          </view>
        </view>
        <view class="dataList" >
          <view class="dataItem" v-for="(good,index) in item.listProduct" :key="index" @click="jumpdetails(good.id)">
            <image :src="good.imageUrl" class="img"></image>
            <view class="title">{{good.name}}</view>
            <view style="display: flex;align-items: center;">
              <text class="item-price">￥{{good.price}}</text>
              <text class="item-original" v-if="!good.hiddenMarketPrice">￥{{good.retailPrice}}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view style="display: flex; flex-direction: column; align-items: center;height: calc(100vh - 242rpx);" v-if="isRequest&&(!brandList || brandList.length==0)">
      <image :src="$store.state.imgBaseUrl + '/empty_list.png'" style="width: 340rpx;height: 340rpx;margin-top: 153rpx;"></image>
      <text style="height:36rpx;font-size:38rpx;font-weight:500;color:rgba(51,51,51,1);line-height: 36rpx;">暂无数据</text>
      <text style="height:29rpx;font-size:30rpx;font-weight:500;color:rgba(102,102,102,1);line-height: 29rpx;margin-top: 35rpx;">先去逛逛吧~</text>
    </view>
  </view>
</template>

<script>
import { findBrandPage } from '../../service/purchaseShop/brand.service.js'
export default {
  data() {
    return {
      type: 1,
      scrolltop: 100,
      oldst: '',
      brandList: '',
      dataList: '',
      page: {
        current: 1,
        size: 10
      },
      count: 0,
      isRequest:false
    }
  },
  created() {
    this.findbrand()
  },
  methods: {
    gobrandList (item) {
      uni.navigateTo({
        url: `./brandList?branId=${item.id}&brandName=${item.name}&pic=${item.imageUrl}`
      })
    },
    changeTab (type) {
      this.scrolltop = 0
      this.type = type
      this.page.current = 1
      if (this.brandList.length === 0) {
        this.findbrand()
      } else {
        var list = this.brandList.slice(0, this.page.size)
        this.brandList.length = 0
        this.brandList = list
        this.getList(this.brandList)
      }
    },
    findbrand () {
      var params = {
        current: this.page.current,
        size: this.page.size
      }
      findBrandPage(params,(res => {
        this.isRequest = true
        if (res.data) {
          if (this.page.current === 1) {
            this.brandList = res.data.records
          } else {
            this.brandList = this.brandList.concat(res.data.records)
          }
          this.count = res.data.total
          // this.getList(res.data.records)
        }
      }))
    },
    jumpdetails(id){
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + id
      })
    },
    lower () {
      if (this.count > this.brandList.length) {
        this.page.current++
        this.findbrand()
      }
    }
  }
}
</script>

<style lang="scss">
.brand{
  .bannerImg{width: 750rpx;height: 232rpx;}
  .brand-wraper{
	  height: calc(100vh - 242rpx);
	  .brandList{width: 690rpx;height: 488rpx;background: #fff;margin: 28rpx auto 0;padding: 0rpx 24rpx;box-sizing: border-box;
				box-shadow:0px 0px 30rpx rgba(0,0,0,0.05);
				opacity:1;
				border-radius:16rpx;
	    .brandImg{width: 76rpx;height: 76rpx;border-radius: 8rpx;margin-right: 20rpx;}
		.brand-name{
			height:42rpx;
			font-size:32rpx;
			font-family:PingFangSC-Medium;
			line-height:42rpx;
			color:rgba(51,51,51,1);
		}
		.brand-all{
			height:38rpx;
			font-size:28rpx;
			font-family:PingFangSC-Regular;
			line-height:28rpx;
			color:rgba(51,51,51,1);
			margin-right: 42rpx;
		}
	    .brandTitle{height: 120rpx;font-size: 30rpx;display: flex;align-items: center;}
	    .dataList{width: 100%; white-space: nowrap;display: flex;justify-content: start;
	      .dataItem{width: 200rpx;border-radius: 8rpx;margin-right: 20rpx;display: inline-block;
	      .img{width: 200rpx;height: 200rpx;margin-bottom: 16rpx;border-radius:4rpx;}
	      .title{color:rgba(51,51,51,1);font-size: 24rpx;margin-bottom: 20rpx;width: 100%;line-height: 32rpx;height: 32rpx;font-family:PingFangSC-Medium;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	      .item-price{
			  height:44rpx;
			  font-size:28rpx;
			  font-family:PingFangSC-Medium;
			  line-height:44rpx;
			  color:rgba(205,67,57,1);
		  }
		  .item-original{
			  height:28rpx;
			  font-size:20rpx;
			  font-family:PingFangSC-Regular;
			  line-height:28rpx;
			  color:rgba(153,153,153,1);
			  text-decoration: line-through;
			  margin-left: 10rpx;
		  }
	      }
	    }
	  }
  }
}
</style>
